import React, { useState, useEffect } from 'react';
import { Breadcrumb, Input, Button, Table, Switch, message,Form } from 'antd';
import '../../../views/Index/Logss/Logss.scss'
import type { ColumnsType } from 'antd/es/table';
import * as service from '../../../api/gl'
// import { exportExcel } from "xlsx-oc"

interface Props {

}

interface DataType {
    key: React.Key;
    name: string;
    time: string
    module: string
    content: string
}

interface PostData {
    current: number
    pageSize: number
    companyId?: number
    tel?: number
    startTime?: number
    endTime?: number
    stockCode?: number
}

function Logss(props: Props) {

    const [form] = Form.useForm()

    const [list, setlist] = useState<DataType[]>([])

    const [postObj, setPostObj] = useState<PostData>({
        current: 1,
        pageSize: 10
    })
    const [total] = useState(10)

    const columns: ColumnsType<DataType> = [
        {
            title: '序号',
            dataIndex: 'xuhao',
            key: 'xuhao',
            // render: (_, record) => <a>{list.indexOf(record) + 1}</a>,
            render:(text: any, record: any, index: any) => `${(postObj.current - 1) * postObj.pageSize + index + 1}`,
        },
        {
            title: '操作时间',
            dataIndex: 'time',
            key: 'time',
            render: (_, record) => <span>{record.time}</span>
        },
        {
            title: '操作人',
            dataIndex: 'name',
            key: 'name',
            render: (_, record) => <span>{record.name}</span>
        },
        {
            title: '操作模块',
            dataIndex: 'module',
            key: 'module',
            render: (_, record) => <span>{record.module}</span>
        },
        {
            title: '操作内容',
            dataIndex: 'content',
            key: 'content',
            render: (_, record) => <span>{record.content}</span>
        },
    ];

    const [data] = useState([{
        
    }])

    const exportFile = () => {
        const list1 = []
        for (let i = 0; i < list.length; i++) {
            const item = list[i]
            list1.push({
                key:i
            })
        }
        const header = [ { k: 'xuhao', v: '序号' },{ k: 'time', v: '操作时间' }, { k: 'name', v: '操作人' }, { k: 'module', v: '操作模块' }, { k: 'content', v: '操作内容' }]
        // exportExcel(header, list)
    }

    //日志列表
    const res1 = async () => {
        const res = await service.logss_list()
        setlist(res.data)
    }
    useEffect(() => {
        res1()
    }, [])

    //查询搜索数据
    var [text, setText] = useState<any>()
    var searchs = (e: any) => {
        var valu = e.target.value
        setText(valu)
        console.log(valu);
    }
    const searchd = async () => {
        const res = await service.logss_search({ name: text })
        console.log(res);
        setlist(res.data)
        res.data.map((item: any) => {
            item.key = item.id
        })
    }
    const onReset = ()=>{
        form.resetFields();
    }

    return (
        <div className='logss'>
            <div className="one">
                <Breadcrumb>
                    <Breadcrumb.Item>
                        <a href="">设置</a>
                    </Breadcrumb.Item>
                    <Breadcrumb.Item>
                        <a href="">操作日志</a>
                    </Breadcrumb.Item>
                </Breadcrumb>
                <p>操作日志</p>
                <div className="sou">
                    <Form
                        form={form}
                    >
                        <div className="left">
                            <Form.Item name="name" label="名称" >
                                <Input value={text} onChange={e => {
                                    searchs(e)
                                }} placeholder="请输入" />
                            </Form.Item>
                        </div>
                        <div className="right">
                            <Button onClick={searchd} type="primary">查询</Button>
                            <Button onClick={onReset}>重置</Button>
                        </div>
                    </Form>
                </div>
                <div className="two">
                    <div className="top">
                        <header>角色列表</header>
                        <div className="you">
                            <Button onClick={exportFile}>导出</Button>
                        </div>
                    </div>
                </div>
                <div className="taber">
                    <Table columns={columns} dataSource={list} />
                </div>
            </div>
        </div>
    );
}

export default Logss;